import React, { PropsWithChildren, useState } from "react";
import { IconAngleDown, IconPlus } from "@gitee/icons-react";
import { ComponentMeta } from "@storybook/react";
import { Button, ConfigProvider, Dropdown, Space } from "antd";
import classNames from "classnames";

const Variant: React.FC<
  PropsWithChildren<{
    title: string;
    highlight?: boolean;
  }>
> = ({ title, highlight = false, children }) => {
  return (
    <Space wrap className="mb-2">
      <h4
        className={classNames("inline-block min-w-[4em] ", {
          "text-gray-400": !highlight,
          "text-black": highlight,
        })}
      >
        {title}
      </h4>
      {children}
    </Space>
  );
};

const items = [
  {
    key: "1",
    label: "1st item",
  },
  {
    key: "2",
    label: "2nd item",
  },
  {
    key: "3",
    label: "3rd item",
  },
];

export default {
  title: "Gitee UI/Button",
  component: Button,
  argTypes: {
    theme: {
      options: ["light", "dark"],
      control: { type: "radio", default: "light" },
    },
  },
} as ComponentMeta<typeof Button>;

export const Type = () => (
  <ConfigProvider theme={{}}>
    <>
      <Variant title="主要" highlight>
        <Button type="primary">Button</Button>
        <Button type="primary" disabled>
          Button
        </Button>
        <Button type="primary" loading disabled>
          Button
        </Button>
      </Variant>
      <Variant title="图文">
        <Button type="primary" icon={<IconPlus inline className="mr-2" />}>
          Button
        </Button>
        <Button
          type="primary"
          icon={<IconPlus inline className="mr-2" />}
          disabled
        >
          Button
        </Button>
        <Button
          type="primary"
          icon={<IconPlus inline className="mr-2" />}
          loading
          disabled
        >
          Button
        </Button>
      </Variant>
      <Variant title="图标">
        <Button type="primary" icon={<IconPlus inline />}></Button>
        <Button type="primary" icon={<IconPlus inline />} disabled></Button>
        <Button
          type="primary"
          icon={<IconPlus inline />}
          disabled
          loading
        ></Button>
      </Variant>
      <Variant title="危险">
        <Button type="primary" danger>
          Button
        </Button>
        <Button type="primary" danger disabled>
          Button
        </Button>
        <Button type="primary" danger loading disabled>
          Button
        </Button>
      </Variant>
      <hr />
    </>
    <>
      <Variant title="次要" highlight>
        <Button type="default">Button</Button>
        <Button type="default" disabled>
          Button
        </Button>
        <Button type="default" loading disabled>
          Button
        </Button>
      </Variant>
      <Variant title="图文">
        <Button type="default" icon={<IconPlus inline className="mr-2" />}>
          Button
        </Button>
        <Button
          type="default"
          icon={<IconPlus inline className="mr-2" />}
          disabled
        >
          Button
        </Button>
        <Button
          type="default"
          icon={<IconPlus inline className="mr-2" />}
          loading
          disabled
        >
          Button
        </Button>
      </Variant>
      <Variant title="图标">
        <Button type="default" icon={<IconPlus inline />}></Button>
        <Button type="default" icon={<IconPlus inline />} disabled></Button>
        <Button
          type="default"
          icon={<IconPlus inline />}
          disabled
          loading
        ></Button>
      </Variant>
      <Variant title="危险">
        <Button type="default" danger>
          Button
        </Button>
        <Button type="default" danger disabled>
          Button
        </Button>
        <Button type="default" danger loading disabled>
          Button
        </Button>
      </Variant>
      <hr />
    </>
    <>
      <Variant title="文本" highlight>
        <Button type="text">Button</Button>
        <Button type="text" disabled>
          Button
        </Button>
        <Button type="text" loading disabled>
          Button
        </Button>
      </Variant>
      <Variant title="文本">
        <Button type="text" icon={<IconPlus inline className="mr-2" />}>
          Button
        </Button>
        <Button
          type="text"
          icon={<IconPlus inline className="mr-2" />}
          disabled
        >
          Button
        </Button>
        <Button
          type="text"
          icon={<IconPlus inline className="mr-2" />}
          loading
          disabled
        >
          Button
        </Button>
      </Variant>
      <Variant title="图标">
        <Button type="text" icon={<IconPlus inline />}></Button>
        <Button type="text" icon={<IconPlus inline />} disabled></Button>
        <Button
          type="text"
          icon={<IconPlus inline />}
          disabled
          loading
        ></Button>
      </Variant>
      <Variant title="危险">
        <Button type="text" danger>
          Button
        </Button>
        <Button type="text" danger disabled>
          Button
        </Button>
        <Button type="text" danger loading disabled>
          Button
        </Button>
      </Variant>
      <hr />
    </>
    <>
      <Variant title="链接" highlight>
        <Button type="link">Button</Button>
        <Button type="link" disabled>
          Button
        </Button>
        <Button type="link" loading disabled>
          Button
        </Button>
      </Variant>
      <Variant title="文本">
        <Button type="link" icon={<IconPlus inline className="mr-2" />}>
          Button
        </Button>
        <Button
          type="link"
          icon={<IconPlus inline className="mr-2" />}
          disabled
        >
          Button
        </Button>
        <Button
          type="link"
          icon={<IconPlus inline className="mr-2" />}
          loading
          disabled
        >
          Button
        </Button>
      </Variant>
      <Variant title="图标">
        <Button type="link" icon={<IconPlus inline />}></Button>
        <Button type="link" icon={<IconPlus inline />} disabled></Button>
        <Button
          type="link"
          icon={<IconPlus inline />}
          disabled
          loading
        ></Button>
      </Variant>
      <Variant title="危险">
        <Button type="link" danger>
          Button
        </Button>
        <Button type="link" danger disabled>
          Button
        </Button>
        <Button type="link" danger loading disabled>
          Button
        </Button>
      </Variant>
      <hr />
    </>
  </ConfigProvider>
);

export const Size = () => (
  <>
    <Variant title="Large">
      <Button type="primary" size="large">
        Button
      </Button>
      <Button
        type="primary"
        size="large"
        icon={<IconPlus className="mr-2" inline />}
      >
        Button
      </Button>
      <Button
        type="default"
        size="large"
        icon={<IconPlus className="mr-2" inline />}
      >
        Button
      </Button>
      <Button type="default" size="large" icon={<IconPlus inline />}></Button>
      <Button
        type="default"
        size="large"
        icon={<IconPlus inline />}
        loading
        disabled
      ></Button>
    </Variant>
    <Variant title="Default">
      <Button type="primary" size="middle">
        Button
      </Button>
      <Button
        type="primary"
        size="middle"
        icon={<IconPlus className="mr-2" inline />}
      >
        Button
      </Button>
      <Button
        type="default"
        size="middle"
        icon={<IconPlus className="mr-2" inline />}
      >
        Button
      </Button>
      <Button type="default" size="middle" icon={<IconPlus inline />}></Button>
      <Button
        type="default"
        size="middle"
        icon={<IconPlus inline />}
        loading
        disabled
      ></Button>
    </Variant>
    <Variant title="Small">
      <Button type="primary" size="small">
        Button
      </Button>
      <Button
        type="primary"
        size="small"
        icon={<IconPlus className="mr-2" inline />}
      >
        Button
      </Button>
      <Button
        type="default"
        size="small"
        icon={<IconPlus className="mr-2" inline />}
      >
        Button
      </Button>
      <Button type="default" size="small" icon={<IconPlus inline />}></Button>
      <Button
        type="default"
        size="small"
        icon={<IconPlus inline />}
        loading
        disabled
      ></Button>
    </Variant>
  </>
);

export const Combo = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Variant title="普通">
        <Dropdown.Button
          menu={{ items }}
          buttonsRender={([leftButton, rightButton]) => [
            React.cloneElement(leftButton as React.ReactElement<any, string>, {
              icon: <IconPlus className="mr-2" inline />,
              type: "primary",
            }),
            rightButton,
          ]}
          icon={
            <IconAngleDown
              inline
              style={{
                transform: `rotate(${open ? -180 : 0}deg)`,
                transition: "transform 0.2s",
              }}
            />
          }
          type="primary"
          open={open}
          onOpenChange={(open) => setOpen(open)}
        >
          Actions
        </Dropdown.Button>
        <Dropdown.Button
          menu={{ items }}
          buttonsRender={([leftButton, rightButton]) => [
            React.cloneElement(leftButton as React.ReactElement<any, string>, {
              icon: <IconPlus className="mr-2" inline />,
            }),
            rightButton,
          ]}
        >
          Actions
        </Dropdown.Button>
        <Dropdown.Button
          menu={{ items }}
          buttonsRender={([leftButton, rightButton]) => [
            React.cloneElement(leftButton as React.ReactElement<any, string>, {
              icon: <IconPlus className="mr-2" inline />,
            }),
            rightButton,
          ]}
          type="primary"
          size="small"
        >
          Actions
        </Dropdown.Button>
        <Dropdown.Button
          menu={{ items }}
          buttonsRender={([leftButton, rightButton]) => [
            React.cloneElement(leftButton as React.ReactElement<any, string>, {
              icon: <IconPlus className="mr-2" inline />,
            }),
            rightButton,
          ]}
          type="default"
          size="small"
        >
          Actions
        </Dropdown.Button>
      </Variant>
      <Variant title="禁用">
        <Dropdown.Button
          menu={{ items }}
          buttonsRender={([leftButton, rightButton]) => [
            React.cloneElement(leftButton as React.ReactElement<any, string>, {
              icon: <IconPlus className="mr-2" inline />,
              type: "primary",
            }),
            rightButton,
          ]}
          type="primary"
          disabled
        >
          Actions
        </Dropdown.Button>
        <Dropdown.Button
          menu={{ items }}
          buttonsRender={([leftButton, rightButton]) => [
            React.cloneElement(leftButton as React.ReactElement<any, string>, {
              icon: <IconPlus className="mr-2" inline />,
            }),
            rightButton,
          ]}
          disabled
        >
          Actions
        </Dropdown.Button>
        <Dropdown.Button
          menu={{ items }}
          buttonsRender={([leftButton, rightButton]) => [
            React.cloneElement(leftButton as React.ReactElement<any, string>, {
              icon: <IconPlus className="mr-2" inline />,
            }),
            rightButton,
          ]}
          type="primary"
          size="small"
          disabled
        >
          Actions
        </Dropdown.Button>
        <Dropdown.Button
          menu={{ items }}
          buttonsRender={([leftButton, rightButton]) => [
            React.cloneElement(leftButton as React.ReactElement<any, string>, {
              icon: <IconPlus className="mr-2" inline />,
            }),
            rightButton,
          ]}
          type="primary"
          size="small"
          loading
          disabled
        >
          Actions
        </Dropdown.Button>
      </Variant>
    </>
  );
};
